<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新增借还-云校通_教师版</title>
<meta name="viewport"
	content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="<%=basePath%>/style/icon.css" />
<link rel="stylesheet" href="<%=basePath%>/style/weui.css" />
<link rel="stylesheet" href="<%=basePath%>/style/weui4.css" />
<link rel="stylesheet" href="<%=basePath%>/style/weui5.css" />
<link rel="stylesheet" href="<%=basePath%>/style/weui_parents.css" />
<style>
.hb_choose {
	top: 50% !important;
	margin-top: -156px !important;
}
.no_border {
	border: none !important;
	height: 180px;
}
.no_border .atype {
	width: 100%;
}
.no_border textarea {
	width: 84%;
	min-height: 80px;
	margin-left: 11%;
	margin-top: 4px;
	border-radius: 4px;
	background: #f8f8f8;
	border: 1px solid #d9d9d9;
	outline: none;
	padding-top: 10px;
	text-indent: 14px;
}
.ry_add_main {
	margin-bottom: 10px;
	background: #fff;
}
.ry_add_main ul {
	width: 100%;
	clear: both;
	display: inline-block;
	border-bottom: 1px solid #ededed;
}
.ry_add_main li {
	display: inline-block;
	float: left;
	height: 42px;
}
.ry_add_main li img {
	margin-left: 10px;
	margin-top: 12px;
	width: 18px;
	height: 18px;
}
.ry_add_main li p {
	margin-left: 10px;
	line-height: 42px;
}

.ry_add_main li input {
	position: absolute;
	right: 4%;
	border-style: none;
	outline-style: none;
	width: 60%;
	height: 42px;
	font-size: inherit;
	color: #d0d0d0;
}

.input_select {
	text-align: right;
	text-transform: none;
}

.weui_btn_area {
	margin-top: 40px;
}

.sc_width {
	position: absolute;
	right: 20px;
	display: block;
	width: 60%;
}

.sc_btn {
	position: relative;
	left: 80%;
	top: 14px;
	width: 46px;
	height: 22px;
	background: #10ffae;
	line-height: 22px;
	text-align: center;
	border-radius: 4px;
	font-size: 16px;
	color: #fff;
}

#form {
	position: relative;
	top: -10px;
}

.sc_dispear {
	margin-top: 8px;
	opacity: 0;
}

.line {
	position: relative;
	top: -8px;
	width: 100%;
	height: 1px;
	background: #ccc;
}

.hb_choose ul li {
	color: #81cbf6;
	text-align: center;
	height: 42px;
	line-height: 42px;
	border-top: 1px solid #ededed;
}
#ls_div_box{
   display:none;
}


#loadNoData{
   display:;
}
#loadMoreData{
   display:
}
#loddingNoData{
   display:none
}
</style>
</head>
<body>
	<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
	<div class="weui-header bg-blue">
		<div class="weui-header-left">
			<a onclick="back()" class="icon icon-109 f-white">返回</a>
		</div>
		<h1 class="weui-header-title">新建</h1>
	</div>
	<div id="main" style="padding-bottom: 20%;">
	   <div class="weui_mask ueureiu weui_mask_visible" style="display: none;z-index:600">
	</div>
		<div class="hide_bd" id="div1" v-bind:style="{display:flag.alertOrHiddenBackgrond}"></div>
		<div class="hb_choose" id="div2" v-bind:style="{display:flag.alertOrHiddenTypeOption}">
			<h1>请选择</h1>
			<ul v-for="item in types">
				<li v-on:click="hiddenDiv($event,'0')" :id="item.id" :value="item.cycleUse">{{item.typeName}}</li>
			</ul>
		</div>
		<div class="hb_choose" id="div3" v-bind:style="{display:flag.alertOrHiddenNameOption}">
			<h1>请选择</h1>
			<ul v-for="item in names">
			  <li v-on:click="hiddenDiv($event,'1')" :id="item.id">{{item.goodsName}}</li>
			</ul>
		</div>
		<div class="hb_choose" id="div4" v-bind:style="{display:flag.alertOrHiddenAttrOption}">
			<h1>请选择</h1>
			<ul v-for="item in attrs">
				<li v-on:click="hiddenDiv($event,'2')" :id="item.id">{{item.googsAttr}}</li>
			</ul>
		</div>
		
		<div id="ls_div_box" class="weui_tab tab-bottom" style="z-index: 600;background-color: #f8f8f8;" v-bind:style="{display:flag.alertOrHiddenNo}">
			<div class="weui_tab_bd">
		        <div class="weui-header bg-blue"> 
		        	<div class="weui-header-left" id="teacherBack" > <a class="icon icon-109 f-white" v-on:click="hiddenDiv($event,'3')" >关闭</a></div>
					<h1 class="weui-header-title">{{post_form.goodsName}}-{{post_form.goodsAttr}}</h1>
				</div>
		        <!--下拉选择-->
		        <div class="page-bd" id="teacherList">  
		            <div class="js-categoryInner">
	                   	<div class="weui_cells" style="margin: 0;padding-top: 5px;">
							<ul class="list_3" >
				            	<li v-for="i in stocks" >
									<div class="weui_cell_hd list_c3" style="display: inline-flex;padding-left: 10px;">
										<label class="weui_cells_checkbox weui_check_label" style="padding-right: 15px;">
											<input type="checkbox" class="weui_check selectCheckNo" v-bind:value="i.id" v-bind:nos="i.goodsNo">
			        						<i class="weui_icon_checked"></i>
										</label>{{i.goodsNo}}
									</div>
	                           </li>
				            </ul>
						</div>
	            	</div>
			    </div>
			    <div class="dropload-down f10" id="loadNoData" v-bind:style="{display:nos.load}">
			         <div class="loadData dropload-hasData" id="loadMoreData" @click="loadMore" >{{nos.state}}</div>
	            </div>
	            <div class="dropload-load f10" id="loddingNoData" v-bind:style="{display:nos.loading}"><span class="weui-loading"></span>正在加载中...</div>
		    <!--End下拉选择-->
			</div>
			<div class="weui_tabbar ">
				<div class="fsdx_tabbar">
		            <span class="left">
						<div class="weui-flex">
		                	<!-- <span style="margin-top: 13px;margin-left: 0px;">
							<label class="weui_cells_checkbox weui_check_label" for="teacherAll">
								<div class="weui_cell_hd">
									<input type="checkbox" class="weui_check" id="teacherAll">
					        		<i class="weui_icon_checked"></i>
								</div>
							</label>
							</span> -->
		                   <!-- 	<p class="weui-flex-item">全选 </p> -->
		                </div>
					</span>
		           <!--  <span class="left">数量：<label id="teacherCount">0</label></span> -->
		            <span class="right " id="teacherSure" @click="checked"><a href="javascript:">确定</a></span>
		        </div>
			</div>
		</div>


		<div class="ry_add_main">
			<ul>
				<li><img src="<%=basePath%>/images/lingyongren@2x.png"></li>
				<li><p>领用人</p></li>
				<li><input class="input_select" type="text" placeholder="请输入姓名"  v-model="post_form.usedName"></li>
			</ul>
			<ul>
				<li><img src="<%=basePath%>/images/cunfangdiand@2x.png"></li>
				<li><p>使用地点</p></li>
				<li><input class="input_select" type="text" placeholder="请输入地点" v-model="post_form.usedPlace"></li>
			</ul>
			<ul id="sBtn">
				<li><img src="<%=basePath%>/images/wupinleib@2x.png"></li>
				<li><p>物品类别</p></li>
				<li><input class="input_select" id="input3" placeholder="请选择 >" v-on:click="alertDiv('0')" v-model="post_form.typeName"
					readonly="readonly"></li>
			</ul>
			<ul id="aBtn">
				<li><img src="<%=basePath%>/images/wupinmingc@2x.png"></li>
				<li><p>物品名称</p></li>
				<li><input class="input_select" id="input4" type="text" v-on:click="alertDiv('1')" v-model="post_form.goodsName"
					readonly="readonly" placeholder="请选择 >"></li>
			</ul>
			<ul id="bBtn">
				<li><img src="<%=basePath%>/images/xinghao@2x.png"></li>
				<li><p>型号</p></li>
				<li><input class="input_select" id="input5" type="text" v-on:click="alertDiv('2')" v-model="post_form.goodsAttr"
					readonly="readonly" placeholder="请选择 >"></li>
			</ul>
			<ul>
	                <li><img src="<%=basePath %>/images/bianhao@2x.png"/></li>
	                <li><p>物品编号</p></li>
	                <li><input class="input_select" id="input3" placeholder="请选择 >" v-on:click="alertDiv('3')" readonly="readonly" :value="post_form.goodsNos"></li>
	            </ul>
			 <ul>
				<li><img src="<%=basePath%>/images/shuliang@2x.png"></li>
				<li><p>数量</p></li>
				<li><input type="text" class="input_select" v-model="post_form.number" :value="post_form.number"  readonly="readonly"></li>
			</ul>
			<ul class="no_border">
				<li><img src="<%=basePath%>/images/miaoshu@2x.png"></li>
				<li><p>描述</p></li>
				<li class="clear atype"><textarea class="clear"
						placeholder="请详细描述借用用途" style="resize: none;" v-model="post_form.describe"></textarea></li>
			</ul>
		</div>
		<div class="line"></div>
		<div class="weui_btn_area clear" >
			<a href="javascript:" class="weui_btn bg-blue" @click="submitForm">提交</a>
		</div>
	</div>

	<script src="<%=basePath%>/js/vue.js"></script>
	<script>
		var vm = new Vue({
            el:'#main',
            data:{
            	  types:[],
            	  names:[],
            	  attrs:[],
            	  stocks:[],
		          flag:{
		        	   alertOrHiddenBackgrond:'none',
		        	   alertOrHiddenTypeOption:'none',
		        	   alertOrHiddenNameOption:'none',
		        	   alertOrHiddenAttrOption:'none',
		        	   alertOrHiddenNo:'none'
		          },
		          post_form:{
		        	    typeId:null,
		        	    typeName:null,
		        	    goodsNameId:null,
		        	    goodsName:null,
		        	    goodsAttrId:null,
		        	    goodsAttr:null,
		        	    cycleUse:null,
		        	    usedName:null,
		        	    usedPlace:null,
		        	    number:0,
		        	    describe:null,
		        	    detailIds:null,
		        	    goodsNos :null
		          },
		          nos:{
		        	  state:'点击加载更多数据...',
		        	  load:'block',
		        	  loading:'none',
		        	  page:1,
		        	  size:20
		        	  
		          }
		    },
		    methods : {
		    	loadMore:function(){
		    		this.nos.load = 'none'
		    		this.nos.loading = 'block'
		    		this.nos.page++;
		    		queryStock();
		    		setTimeout(function(){
		    			vm.nos.load = 'block'
				    	vm.nos.loading = 'none'
		    		},600);
		    		
		    	},
		    	checked:function(){
		    		this.flag.alertOrHiddenNo = 'none';
		    		var temp = $(".selectCheckNo");
		    	    var ids = '';
		    	    var num = 0;
		    	    var goodsNos = '';
		    	    
		    		for(i in temp){
		    			var f =temp[i].checked;
		    			if(f === true){
		    				num++;
		    				if(ids == '')
		    					ids = temp[i].value
		    				else	
		    				    ids = ids + "," + temp[i].value;
		    				
		    				if(goodsNos == '')
		    					goodsNos =  $(temp[i]).attr('nos');
		    				else
		    					goodsNos = goodsNos + ',' + $(temp[i]).attr('nos');
		    			}
		    		}
		    			this.post_form.detailIds = ids;
		    			this.post_form.number = num;
		    			this.post_form.goodsNos = goodsNos;
		    			console.log(ids);
		    	},
		    	submitForm:function(){
		    		
		    		if(this.post_form.usedName == null || this.post_form.usedName == ''){
			    		$.alert("请输入使用人","");
			    		return;
			    	}
		    		if(this.post_form.typeName == null || this.post_form.goodsNameId ==''){
			    		$.alert("请选择类别","");
			    		return;
			    	}
		    		if(this.post_form.goodsNameId == null || this.post_form.goodsNameId ==''){
			    		$.alert("请选择物品","");
			    		return;
			    	}
		    		if(this.post_form.goodsAttrId == null || this.post_form.goodsAttrId ==''){
			    		$.alert("请选择物品型号","");
			    		return;
			    	}
		    		if(this.post_form.number == null || this.post_form.number == 0){
			    		$.alert("请选择物品编号","");
			    		return;
			    	}
		    		if(this.post_form.detailIds == null || this.post_form.detailIds == ''){
			    		$.alert("请选择物品编号","");
			    		return;
			    	}
		    		$.ajax({
						url : basePath + '/ls/school/property/outputRecord/add',
						type : 'post',
						dataType : 'json',
						data : {
							    goodsNameId:this.post_form.goodsNameId,
							    goodsAttrId:this.post_form.goodsAttrId,
								typeId:this.post_form.typeId,
								typeName:this.post_form.typeName,
								goodsName:this.post_form.goodsName,
								goodsAttr:this.post_form.goodsAttr,
								number:this.post_form.number,
								describe:this.post_form.describe,
								usedName:this.post_form.usedName,
								usedPlace:this.post_form.placeSite,
								cycleUse:this.post_form.cycleUse,
								detailIds:this.post_form.detailIds
						},
						success : function(data) {
							if (data.code == '000') {
									 window.location.href = (basePath + "/ls/school/property/lendAndReturnInex?dateTime=" + new Date().getTime());
							} else {
								$.toptips(data.msg);
							}
						}
					});
		    	},
            	hiddenDiv:function(var1,var2){
            		//隐藏标签
            		this.flag.alertOrHiddenBackgrond = 'none'
            	    this.flag.alertOrHiddenTypeOption = 'none'
            		this.flag.alertOrHiddenNameOption = 'none'
            		this.flag.alertOrHiddenAttrOption = 'none'
            		this.flag.alertOrHiddenNo = 'none'
            			var dom = var1.target;
            		//类别
            		if(var2 === '0'){
            			this.post_form.typeId = dom.id
					    this.post_form.typeName = dom.innerHTML
					    this.post_form.cycleUse = dom.value
            		//名称	
            		}else if(var2 === '1'){
    			    	this.post_form.goodsNameId = dom.id;
    			    	this.post_form.goodsName = dom.innerHTML
            		//属性	
            		}else if(var2 === '2'){
            			this.post_form.goodsAttrId = dom.id;
			    		this.post_form.goodsAttr = dom.innerHTML
            		}else if(var2 === '3'){
            			this.flag.alertOrHiddenNo = 'none'
            		}else{}
            	},
            	alertDiv: function(var2){
            		//类别
            		if(var2 === '0'){
            			this.flag.alertOrHiddenBackgrond = 'block'
            			this.flag.alertOrHiddenTypeOption = 'block'
            		//名称
            		}else if(var2 === '1'){
            			if(this.post_form.typeId == null)
            				$.alert("请先选择物品类别","");
            			else{
            				var typeId = this.post_form.typeId;
    						for(var i = 0;i < this.types.length;i++){
    							if(this.types[i].id == typeId){
    								this.names = this.types[i].names;
    							}
    						}
            			   this.flag.alertOrHiddenBackgrond = 'block'
            			   this.flag.alertOrHiddenNameOption = 'block'
            			}
            		//属性	
            		}else if(var2 === '2'){
            			if(this.post_form.goodsNameId == null)
            				$.alert("请先选择物品名称","");
            			else{
            				 var nameId = this.post_form.goodsNameId;
    						 for(var j = 0;j < this.names.length;j++){
    							if(this.names[j].id == nameId){
    								this.attrs = this.names[j].attrs;
    							}
    						 }
            			   this.flag.alertOrHiddenBackgrond = 'block'
            			   this.flag.alertOrHiddenAttrOption = 'block'
            			}	 
            	     //编号		   
            		}else if(var2 === '3'){
                			if(this.post_form.goodsAttrId == null)
                				$.alert("请先选择物品属性","");
                			else{
                				queryStock();
                				setTimeout(function(){
                			    vm.flag.alertOrHiddenNo = 'block'
                				},500);
                			}   
            		}else{}
            	}
            }
		})
		$(function() {
			getAllType();
			queryStock();
		})
		function getAllType() {
			$.ajax({
				url : basePath + '/ls/school/property/type/all',
				type : 'post',
				dataType : 'json',
				data :{
					 cycleUse : 1
				},
				success : function(data) {
					if (data.code == '000') {
						 vm.types = data.data;
					} else {
						$.toptips(data.msg);
					}
				}
			});
		}
		function queryStock(){
			$.ajax({
				url : basePath + '/ls/school/property/stock/detail/query',
				type : 'post',
				dataType : 'json',
				data : {
					typeId:vm.post_form.typeId,
					goodsNameId:vm.post_form.goodsNameId,
					goodsAttrId:vm.post_form.goodsAttrId,
					cycleUse:vm.post_form.cycleUse,
					goodsState:0,
					page:vm.nos.page,
					rows:vm.nos.size
				},
				success : function(data) {
					if (data.code == '000') {
						if(data.data != null && data.data != ''){
						    var temp = vm.stocks;
						 if(temp.length < 1)
						      vm.stocks = data.data.rows;
						 else{
							for (var i = 0; i < data.data.rows.length; i++) {
								temp.push((data.data.rows)[i])
							}
						 }
						}
						if(vm.nos.page * vm.nos.size > data.data.total){
							vm.nos.state = "没有更多数据了...";
						}
					} else {
						$.toptips(data.msg);
					}
				}
			});
		}
	</script>
	<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
</body>
</html>